<template>
  <div class="row-main">
    <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" class="row-main-table"
              @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
      <el-table-column prop="id" label="套餐编码" align="center" :fixed="$store.state.app.screenWidth<992?true:false" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
      <el-table-column prop="mealName" label="套餐名称" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
<!--      <el-table-column prop="dictMealTypeName" label="套餐类型" align="center"></el-table-column>-->
      <!--      <el-table-column prop="dictSetMealGroupTypeName" label="套餐组类型" align="center"></el-table-column>-->
<!--      <el-table-column prop="dictIsPreStorage" label="是否次月生效" align="center"></el-table-column>-->
      <el-table-column prop="costPrice" label="我方成本价" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
      <el-table-column prop="officialPrice" label="官方售价" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
      <el-table-column prop="salePrice" label="代理售价" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
      <el-table-column prop="mealSpecConverted" label="规格" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
      <el-table-column prop="terOfValidity" label="有效期" align="center" :width="$store.state.app.screenWidth<992?'180px':auto"></el-table-column>
      <el-table-column prop="ceilingPrice" label="代理设定的上限价格" align="center" :width="$store.state.app.screenWidth<992?'180px':auto"></el-table-column>
      <el-table-column label="操作" align="center" :width="$store.state.app.screenWidth<992?'180px':auto">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"  @click="setMealPrice(scope.row)" >设置套餐价格</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,20,50,100]"
                   :current-page.sync="currentPage" :page-size="pageSize"  layout="total, sizes, prev, pager, next, jumper"
                   :page-count="maxPage" :hide-on-single-page="value" background class="row-main-pager"></el-pagination>
    </div>
  </div>
</template>


<script>
import {setMealListForUser, setSalePriceForUser} from '@/api/getData'

export default {
  name: "setMealPrice",
  data() {
    return {
      form: {},
      value: false,
      maxPage: 1,
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      headerId: ''
    }
  },
  created() {

    this.initData()
  },
  methods: {
    async initData() {
      this.tableLoading = true;
      const returnData = await setMealListForUser({
          page: {
            current: this.currentPage + '',
            size: this.pageSize + '',
            ascs: this.ascs,
            descs: this.descs
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        });
      this.tableData = []
      if (returnData._result) {
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.nickName = item.nickName // 所属客户
          obj.mealName = item.mealName
          obj.dictMealTypeName = item.dictMealTypeName
          obj.dictSetMealGroupTypeName = item.dictSetMealGroupTypeName
          obj.officialPrice = item.officialPrice + "元"
          obj.ceilingPrice = item.ceilingPrice + "元"
          obj.dictMealType = item.dictMealType
          if (item.dictTerOfValidity == 'MONTH') {
            obj.terOfValidity = item.terOfValidity + "个月"
          }
          if (item.dictTerOfValidity == 'DAY') {
            obj.terOfValidity = item.terOfValidity + "天"
          }
          obj.feeRateId = item.feeRateId
          if (item.dictIsPreStorage == 'YES') {
            obj.dictIsPreStorage = '次月生效';
          } else if (item.dictIsPreStorage == 'NO') {
            obj.dictIsPreStorage = '当月生效';
          }
          if (item.terOfValidity == null) {
            obj.terOfValidity = "无";
          }
          if (item.mealSpec >= 1024) {
            obj.mealSpecConverted = item.mealSpec / 1024 + "GB"
          } else {
            obj.mealSpecConverted = item.mealSpec + "MB"
          }
          obj.mealSpec = item.mealSpec
          obj.salePrice = item.salePrice + "元"
          obj.costPrice = item.costPrice + "元"
          this.tableData.push(obj)
        })
        this.tableLoading = false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`)
      this.currentPage = val
      this.initData()
    },
    async deleteSetMeal(obj) {
      this.$confirm('您确定要执行此操作么, 是否继续?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async () => {
        let sos = await packageDelete({id: obj.id, headId: this.headerId});
        if (sos._result) {

          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.initData()
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        });
      });
    },
    async gotoAddBase() {
      this.$router.push({path: '/road/baseThreeSetMealAdd', query: {headerId: this.headerId}})
    },
    async setMealPrice(setMeal) {
      let feeRateId = setMeal.feeRateId
      let id = setMeal.id
      this.$prompt('请输入价格', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d+\.?\d{0,2}$/,
        inputErrorMessage: '价格格式输入不正确'
      }).then(async ({value}) => {
        let pagekey = await this.$getPageKey();
        let rs = await setSalePriceForUser({
          id: id,
          feeRateId: feeRateId,
          salePrice: value
        }, {pagekey})
        if (rs._result) {
          this.$message({
            type: 'success',
            message: '操作成功'
          });
          this.initData()
        }

      }).catch(() => {

      });


    },
    editSetMeal(obj) {
      switch (obj.dictMealType) {
        /*case "SETMEAL_BASE":
          this.$router.push({path: '/road/baseThreeSetMealAdd', query: {headerId: this.headerId, id: obj.id}});
          break;*/
        case "SETMEAL_ADD_OIL":
          this.$router.push({path: '/road/baseThreeSetMealAdd', query: {headerId: this.headerId, id: obj.id}});
          break;
      }
    }, cancel() {

      this.$router.back(-1)
    },
  }
}
</script>

<style scoped lang="scss">
.topRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.el-popper[x-placement^=bottom] {
  margin-right: -31px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}

.el-popper[x-placement^=top] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -31px;

  button {
    display: block;
  }

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
</style>
